<template>
<div class="maincontent">
  <el-card class="box-card">
    <div class="breadcrumb" slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{name:'加盟商管理'}">加盟商管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="boxtitle">
      <div class="title">
        加盟商列表
      </div>
    </div>
    <div>
      <el-form :inline="true" onsubmit="return false">
        <el-form-item label="加盟商名称">
          <el-input v-model.trim="selfrom.name" placeholder="加盟商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dosearch"><i class="el-icon-search"></i>筛选</el-button>
        </el-form-item>
        <el-form-item style="float: right">
            <el-button type="primary" @click="Visibleadd=true" ><i class="el-icon-plus"></i>添加加盟商</el-button>
        </el-form-item>
      </el-form>

    </div>
      <div v-loading="tableloading">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="加盟商名称" min-width="150"  align="center" prop="store_name"></el-table-column>
          <el-table-column label="店面地址"   align="center"></el-table-column>
          <el-table-column label="登录用户名"  align="center" prop="sys_user_name"></el-table-column>
          <el-table-column label="登录密码"  align="center" prop="sys_user_paw"></el-table-column>
          <el-table-column label="创建时间"  align="center" >
            <template scope="scope">
            {{datefromate(scope.row.createtime.time)}}
              </template>
          </el-table-column>
  <!--         <el-table-column label="操作"  align="center"></el-table-column> -->
        </el-table>
        <div style="text-align: right;margin-top: 10px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.pageCount"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalCount">
            </el-pagination>
        </div>

      </div>

  </el-card>
  <el-dialog ref="refaddoption" :model="addoption" v-loading.body="dialogloading"  title="添加加盟商" :visible.sync="Visibleadd">
      <el-form label-width="100px">
          <el-form-item label="加盟商名称" prop="name">
            <el-input v-model.trim="addoption.name" ></el-input>
          </el-form-item>
          <el-form-item label="登录用户名" prop="username">
            <el-input v-model.trim="addoption.username" ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="userpsd">
            <el-input  v-model.trim="addoption.userpsd"></el-input>
          </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="Visibleadd = false">取 消</el-button>
          <el-button type="primary" @click="addstore">确 定</el-button>
      </div>
  </el-dialog>
</div>
</template>
<script>
import until from "../until/until";
import API from "../API";
import merge from "../until/merge"
export default {
  data() {
    return {
      selfrom: {
        name: "",
      },
      selactionfrom: {
        name: "",
      },
      addoption:{
        name:"",
        username:"",
        userpsd:""
      },
      tableloading: false,
      tableData:[],
      Visibleadd:false,
      dialogloading:false,
      allowpagechangeaction:false,
      page:{
          pageSize:10,
          pageCount:1,
          totalCount:0
      },
    }
  },
  mounted() {
    this.initdata();
  },
  methods: {
    dosearch() {
      this.selactionfrom=merge({},this.selactionfrom,this.selfrom);
        this.page.pageCount=1;
        this.initdata();
    },
    initdata(){
      this.tableloading=true;
      this.allowpagechangeaction=false;
      this.selfrom=merge({},this.selfrom,this.selactionfrom);

      API.queryFranchiseUser({
        store_name:this.selactionfrom.name,
        pageCount:this.page.pageCount,
        pageSize:this.page.pageSize
      }).then((res)=>{
        let json=res.data;
        if (json.message=="success") {
          this.tableData=json.infolist;
          this.page=json.page;
        }
        setTimeout(()=>{
            this.allowpagechangeaction=true;
        },150);
        this.tableloading=false;
      }).catch(()=>{
        setTimeout(()=>{
            this.allowpagechangeaction=true;
        },150);
        this.tableloading=false;
      })
    },
    addstore(){
      if(this.addoption.name==""){
        this.$message({
          showClose: true,
          message: '请填写加盟商名称',
          type: 'warning'
        });
        return false
      }
      if(this.addoption.username==""){
        this.$message({
          showClose: true,
          message: '请填写登录用户名',
          type: 'warning'
        });
        return false
      }
      if(this.addoption.userpsd==""){
        this.$message({
          showClose: true,
          message: '请填写登录密码',
          type: 'warning'
        });
        return false
      }
      this.dialogloading=true;
      API.AddFranchise({
        username:this.addoption.username,
        password:this.addoption.userpsd,
        store_name:this.addoption.name
      }).then((res)=>{
        this.dialogloading=false;
        let json=res.data;
        if (json.message=="success") {
          this.$notify({
            title: '成功',
            message: '添加加盟商成功',
            type: 'success'
          });
          this.Visibleadd=false;
          this.initdata();
        }else if (json.message=="repeat") {
          this.$notify({
            title: '失败',
            message: '该登录用户已存在，请使用其他登录用户注册',
            type: 'error'
          });
        }else {
          this.$notify({
            title: '失败',
            message: '请求失败',
            type: 'error'
          });
        }
      }).catch(()=>{
        this.dialogloading=false;
      })

    },
    handleSizeChange(val){
        this.page.pageSize=val;
        this.initdata()
    },
    handleCurrentChange(val){
        if (this.allowpagechangeaction){
            this.page.pageCount=val;
            this.initdata()
        }
    },
    datefromate(item){
      return until.dateFtt("yyyy-MM-dd hh:mm:ss",new Date(item))
    }

  },
  watch:{
    Visibleadd(newval){
      if (!newval) {
        this.addoption={
          name:"",
          username:"",
          userpsd:""
        }
      }
    }
  }
}
</script>
<style lang="less">
@import "../css/common.less";
</style>
